<template>
  <div>
    <div class="bank">
      <van-icon name="arrow-left" @click="fun()" class="iconyi" />
      <van-icon
        name="share-o"
        class="iconer"
        @click="(showShare = true), funb()"
      />
      <van-share-sheet v-model="showShare" title="分享到" :options="options" />
    </div>
    <div class="banner">
      <div class="bannerl"><span>好课推荐</span></div>
      <div class="bannerr"><span>更多</span></div>
    </div>
    <div class="main">
      <Jkzj />
    </div>
  </div>
</template>

<script>
import Jkzj from "@/components/foundcomp/jkzj.vue";
export default {
  components: {
    Jkzj,
  },
  data() {
    return {
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },
  methods: {
    fun() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.iconyi {
  font-size: 0.25rem;
  line-height: 0.51rem;
}
.bank {
  height: 0.51rem;
  width: 3.45rem;
  margin: auto;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0rem;
  background-color: white;
  left: 0.14rem;
}
.iconer {
  font-size: 0.25rem;
  line-height: 0.51rem;
}
.banner {
  /* margin-left: 0.14rem; */
  margin-top: 0.51rem;
  width: 100%;
  height: 0.51rem;
  display: flex;
  line-height: 0.51rem;
  justify-content: space-between;
}
.banner .bannerr {
  font-size: 0.14rem;
  margin-right: 0.18rem;
}
.banner .bannerl {
  margin-left: 0.18rem;
}
.main {
  width: 3.45rem;
  margin-left: 0.14rem;
}
</style>